<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Single</title>
    <link rel="shortcut icon" th:href="@{/frontend/images/favicon.ico}"
          href="../../static/frontend/images/favicon.ico"/>
    <link href="../../static/frontend/css/bootstrap.css" th:href="@{/frontend/css/bootstrap.css}" rel="stylesheet"
          type="text/css"
          media="all"/>
    <!-- Custom Theme files -->
    <!--theme-style-->
    <link href="../../static/frontend/css/style.css" th:href="@{/frontend/css/style.css}" rel="stylesheet"
          type="text/css" media="all"/>
    <!--//theme-style-->
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content="Fashion Mania Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design"/>
    <script src="../../static/frontend/js/jquery.min.js" th:src="@{/frontend/js/jquery.min.js}"></script>
    <script src="../../static/frontend/layer/layer.js" th:src="@{/frontend/layer/layer.js}"></script>
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);
    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>

</head>
<body>

<div th:replace="frontend/common::header"></div>

<div class="single">

    <div class="container">
        <input type="hidden" id="productId" th:value="${product.productId}"/>
        <div class="col-md-9">
            <div class="col-md-5 grid">
                <div class="flexslider">
                    <ul class="slides">
                        <li th:attr="data-thumb=${'/fleastreet/manager/product/img/'+product.productId}">
                            <div class="thumb-image"><img src="../../static/frontend/images/si.jpg"
                                                          th:src="${'/fleastreet/manager/product/img/'+product.productId}"
                                                          data-imagezoom="true"
                                                          class="img-responsive"/></div>
                        </li>
                        <!--    <li data-thumb="images/si1.jpg">
                                <div class="thumb-image"><img src="../../static/frontend/images/si1.jpg"
                                                              th:src="@{/frontend/images/si1.jpg}"
                                                              data-imagezoom="true"
                                                              class="img-responsive"/></div>
                            </li>
                            <li data-thumb="images/si2.jpg">
                                <div class="thumb-image"><img src="../../static/frontend/images/si2.jpg"
                                                              th:src="@{/frontend/images/si2.jpg}"
                                                              data-imagezoom="true"
                                                              class="img-responsive"/></div>
                            </li>-->
                    </ul>
                </div>
            </div>
            <div class="col-md-7 single-top-in">
                <div class="single-para simpleCart_shelfItem">
                    <h1 th:text="${product.name}">这是一件非常流弊且热卖的女士T恤</h1>
                    <p th:text="${tag.tagContent}">这是一段很牛逼很了不起的描述，专门用于描述这个产品的，当然我也可以用于推广其他东西，变成链接</p>
                    <div class="star-on">
                        <ul>
                            <li><a href="#"><i class="glyphicon glyphicon-star"> </i></a></li>
                            <li><a href="#"><i class="glyphicon glyphicon-star"> </i></a></li>
                            <li><a href="#"><i class="glyphicon glyphicon-star"> </i></a></li>
                            <li><a href="#"><i class="glyphicon glyphicon-star"> </i></a></li>
                            <li><a href="#"><i class="glyphicon glyphicon-star"> </i></a></li>
                        </ul>
                        <div class="review">
                            <a id="comment" href="#">查看评价</a>
                        </div>
                        <div class="clearfix"></div>
                    </div>

                    <label class="add-to item_price" th:text="${'¥'+product.price}">¥44</label>

                    <!-- <div class="available">
                         <h6>可选参数</h6>
                         <ul>

                             <li>Size:<select>
                                 <option>Large</option>
                                 <option>Medium</option>
                                 <option>small</option>
                                 <option>Large</option>
                                 <option>small</option>
                             </select></li>
                             <li>Cost:
                                 <select>
                                     <option>U.S.Dollar</option>
                                     <option>Euro</option>
                                 </select></li>
                         </ul>
                     </div>-->
                    <a id="item_add" class="cart item_add">更多详情</a>
                    <a onclick="addCart()" class="cart item_add">加入购物车</a>


                </div>

            </div>
            <div class="col-md-10  single-top-in"  id="product_msg" style="display:none">
                <div class="layui-row" style="margin-top: 70px;">
                    <fieldset class="layui-elem-field">
                        <legend style="font-weight: 700"><i class="fa fa-heart" style="color: #FF5722;"></i>商品描述<i
                                class="fa fa-heart" style="color: #FF5722;"></i></legend>
                        <div class="layui-field-box desc">
                            <p th:text="${tag.productContent}"></p>
                            <hr class="layui-bg-green"/>
                            <img class="img_responsive"
                                 th:src="${'/fleastreet/manager/product/img/'+ product.productId}"/>
                        </div>
                    </fieldset>
                </div>
            </div>
            <div class="col-md-10  single-top-in" id="comment_msg" style="display:none">
                <div class="layui-row" style="margin-top: 75px;">
                    <fieldset id="prodComments" class="layui-elem-field">
                        <legend  style="font-weight: 700"><i class="fa fa-heart" style="color: #FF5722;"></i>商品评价<i
                                class="fa fa-heart" style="color: #FF5722;"></i></legend>
                    </fieldset>
                </div>
            </div>

            <div class="clearfix"></div>
            <!--<div class="content-top1">
                <div class="col-md-4 col-md3">
                    <div class="col-md1 simpleCart_shelfItem">
                        <a href="single.html">
                            <img class="img-responsive" src="../../static/frontend/images/pi6.png"
                                 th:src="@{/frontend/images/pi6.png}"
                                 alt=""/>
                        </a>
                        <h3><a href="single.html">Jeans</a></h3>
                        <div class="price">
                            <h5 class="item_price">$300</h5>
                            <a href="#" class="item_add">Add To Cart</a>
                            <div class="clearfix"></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-md3">
                    <div class="col-md1 simpleCart_shelfItem">
                        <a href="single.html">
                            <img class="img-responsive" src="../../static/frontend/images/pi7.png"
                                 th:src="@{/frontend/images/pi7.png}"
                                 alt=""/>
                        </a>
                        <h3><a href="single.html">Tops</a></h3>
                        <div class="price">
                            <h5 class="item_price">$300</h5>
                            <a href="#" class="item_add">Add To Cart</a>
                            <div class="clearfix"></div>
                        </div>

                    </div>
                </div>
                <div class="col-md-4 col-md3">
                    <div class="col-md1 simpleCart_shelfItem">
                        <a href="single.html">
                            <img class="img-responsive" src="../../static/frontend/images/pi.png"
                                 th:src="@{/frontend/images/pi.png}"
                                 alt=""/>
                        </a>
                        <h3><a href="single.html">Tops</a></h3>
                        <div class="price">
                            <h5 class="item_price">$300</h5>
                            <a href="#" class="item_add">Add To Cart</a>
                            <div class="clearfix"></div>
                        </div>

                    </div>
                </div>

                <div class="clearfix"></div>
            </div>-->
        </div>

        <div class="col-md-3 product-bottom">

            <div class=" rsidebar span_1_of_left">
                <h3 class="cate">分类</h3>
                <ul class="menu-drop">
                    <li id="s101" class="items"><a href="/fleastreet/category/101">书籍</a>
                        <ul class="cute">
                        </ul>
                    </li>
                    <li id="s102" class="items"><a href="/fleastreet/category/102">日用品</a>
                        <ul class="cute">

                        </ul>
                    </li>
                    <li id="s103" class="items"><a href="/fleastreet/category/103">电子产品</a>
                        <ul class="cute">

                        </ul>
                    </li>
                </ul>
            </div>
            <!--initiate accordion-->
            <script type="text/javascript">
                $(function () {
                            var menu_ul = $('.menu-drop > li > ul'),
                                    menu_a = $('.menu-drop > li > a');
                            menu_ul.hide();
                            menu_a.click(function (e) {
                                e.preventDefault();
                                if (!$(this).hasClass('active')) {
                                    menu_a.removeClass('active');
                                    menu_ul.filter(':visible').slideUp('normal');
                                    $(this).addClass('active').next().stop(true, true).slideDown('normal');
                                } else {
                                    $(this).removeClass('active');
                                    $(this).next().stop(true, true).slideUp('normal');
                                }
                            });

                        }
                );


                //                    <![CDATA[
                //加载分类
                var idList = $(".items");
                $(idList).each(function (index1, item1) {
                    var num = $(item1).attr("id");
                    $.post("/fleastreet/category/" + num.substr(1, 3), function (data) {
                        if (data.code == 0) {
                            var list = $("#" + num).find('.cute');
                            $(data.data).each(function (index, item) {
                                var cat = $("<li class=''><a href='/fleastreet/category/type/" + item.productTypeId + "'>" + item.typeName + "</a></li>");
                                list.append(cat);
                            })

                        } else {
                            layer.msg("获取产品列表错误，请检查数据库");
                        }
                    })
                });
            </script>
            <!--//menu-->
            <!--seller-->
            <!-- <div class="product-bottom">
                 <h3 class="cate">热卖</h3>
                 <div class="product-go">
                     <div class=" fashion-grid">
                         <img class="img-responsive " src="../../static/frontend/images/pr.jpg"
                              th:src="@{/frontend/images/pr.jpg}" alt=""></a>
                     </div>
                     <div class=" fashion-grid1">
                         <h6 class="best2">这是展示用一号服装</a></h6>
                         <span class=" price-in1"> ￥40.00</span>
                     </div>
                     <div class="clearfix"></div>
                 </div>
                 <div class="product-go">
                     <div class=" fashion-grid">
                         <img class="img-responsive " src="../../static/frontend/images/pr1.jpg"
                              th:src="@{/frontend/images/pr1.jpg}" alt=""></a>
                     </div>
                     <div class=" fashion-grid1">
                         <h6 class="best2">这是展示用二号服装</a></h6>
                         <span class=" price-in1"> ￥40.00</span>
                     </div>
                     <div class="clearfix"></div>
                 </div>
                 <div class="product-go">
                     <div class=" fashion-grid">
                         <img class="img-responsive " src="../../static/frontend/images/pr2.jpg"
                              th:src="@{/frontend/images/pr2.jpg}" alt=""></a>
                     </div>
                     <div class=" fashion-grid1">
                         <h6 class="best2">这是展示用三号服装</a></h6>
                         <span class=" price-in1"> ￥40.00</span>
                     </div>
                     <div class="clearfix"></div>
                 </div>
                 <div class="product-go">
                     <div class=" fashion-grid">
                         <img class="img-responsive " src="../../static/frontend/images/pr3.jpg"
                              th:src="@{/frontend/images/pr3.jpg}" alt=""></a>
                     </div>
                     <div class=" fashion-grid1">
                         <h6 class="best2">这是展示用四号服装</a></h6>
                         <span class=" price-in1"> ￥40.00</span>
                     </div>
                     <div class="clearfix"></div>
                 </div>
             </div>-->

            <!--//seller-->
            <!--tag-->
            <div class="tags">
                <h3 class="cate">标签</h3>
                <div class="tag">
                    <ul>
                        <li><a href="#">SpringBoot</a></li>
                        <li><a href="#">Nginx</a></li>
                        <li><a href="#">BootStrap</a></li>
                        <li><a href="#">RESTful</a></li>
                        <li><a href="#">spring</a></li>
                        <li><a href="#">redis</a></li>
                        <li><a href="#">mysql</a></li>
                        <li><a href="#">thymeleaf</a></li>
                        <li><a href="#">mybatis</a></li>
                        <li><a href="#">Logback</a></li>
                        <li><a href="#">jquery</a></li>
                        <li><a href="#">layui</a></li>
                        <li><a href="#">pager</a></li>
                        <li><a href="#">druid</a></li>
                        <div class="clearfix"></div>
                    </ul>
                </div>
            </div>

        </div>
        <div class="clearfix"></div>
    </div>
</div>


<div th:replace="frontend/common::footer"></div>


<script src="../../static/frontend/js/imagezoom.js" th:src="@{/frontend/js/imagezoom.js}"></script>
<link href="../../static/frontend/css/memenu.css" th:href="@{/frontend/css/memenu.css}" rel="stylesheet" type="text/css"
      media="all"/>
<script type="text/javascript" src="../../static/frontend/js/memenu.js" th:src="@{/frontend/js/memenu.js}"></script>
<script>$(document).ready(function () {
    $(".memenu").memenu();
});</script>
<script src="../../static/frontend/js/simpleCart.min.js" th:src="@{/frontend/js/simpleCart.min.js}"></script>
<!--<script type="text/javascript">
    $(function () {
        var menu_ul = $('.menu-drop > li > ul'),
                menu_a = $('.menu-drop > li > a');
        menu_ul.hide();
        menu_a.click(function (e) {
            e.preventDefault();
            if (!$(this).hasClass('active')) {
                menu_a.removeClass('active');
                menu_ul.filter(':visible').slideUp('normal');
                $(this).addClass('active').next().stop(true, true).slideDown('normal');
            } else {
                $(this).removeClass('active');
                $(this).next().stop(true, true).slideUp('normal');
            }
        });

    });
</script>-->
<script src="../../static/frontend/js/jquery.flexslider.js" th:src="@{/frontend/js/jquery.flexslider.js}"></script>
<link rel="stylesheet" href="../../static/frontend/css/flexslider.css" th:href="@{/frontend/css/flexslider.css}"
      type="text/css"
      media="screen"/>

<script>
    // Can also be used with $(document).ready()
    $(window).load(function () {
        $('.flexslider').flexslider({
            animation: "slide",
            controlNav: "thumbnails"
        });
    });
</script>
<link href="../../static/frontend/css/popuo-box.css" th:href="@{/frontend/css/popuo-box.css}" rel="stylesheet"
      type="text/css" media="all"/>
<script src="../../static/frontend/js/jquery.magnific-popup.js" th:src="@{/frontend/js/jquery.magnific-popup.js}"
        type="text/javascript"></script>
<script>
    $(document).ready(function () {
        $('.popup-with-zoom-anim').magnificPopup({
            type: 'inline',
            fixedContentPos: false,
            fixedBgPos: true,
            overflowY: 'auto',
            closeBtnInside: true,
            preloader: false,
            midClick: true,
            removalDelay: 300,
            mainClass: 'my-mfp-zoom-in'
        });

    });

    /*   $("#item_add").click(function(){
     $("#product_msg").css('display','block');
     });*/

    $(function () { //针对产品描述信息，默认隐藏，点击显示
        $("#item_add").bind("click", function () {
            var $tips_content = $("#product_msg");
            if ($tips_content.is(":visible")) {
                $tips_content.hide();
            } else {
                $tips_content.show();
                $tips_content[0].scrollIntoView(true);
            }
        })
    })

    $(function () { //针对产品评论信息，默认隐藏，点击显示
        $("#comment").bind("click", function () {
            var $tips_content = $("#comment_msg");
            if ($tips_content.is(":visible")) {
                $("#comments").remove();
                $tips_content.hide();
            } else {
                //将数据渲染进页面
                var productId = $("#productId").val();
                $.post("/fleastreet/product/comment/" + productId, function (data) {
                    if (data.code == 0) {
                        var prodcomments = $("#prodComments");
                        prodcomments.append("<div id = 'comments'></div>");
                        var commentList = $("#comments");
                        $(data.data).each(function (index, item) {
                            var cat = $("<div style='padding-bottom:30px;'> <div id='left' style='float:left ;  width:15%;  height:100%;'> <a href='#'><i class='glyphicon'>" +  item.userName + "</i> </a> </div> <div id='right' style='float:left ;  width:80%; height:100%;'>" + item.reviewContent + "</div> </div>");
                            commentList.append(cat);
                        })
                        $tips_content[0].scrollIntoView(true);
                    } else {
                        layer.msg("获取商品评论错误，请检查数据库");
                    }
                })
                //展示
                $tips_content.show();
            }
        })
    })


    function addCart() {//加入购物车
        var productId = $("#productId").val();
        if (!productId) {
            layer.msg("错误！");
            return;
        }
        $.get("/fleastreet/product/cart/add?productId=" + productId, function (data) {
            if (data.code == 0) {
                layer.msg("添加购物车成功！");
            } else {
                layer.msg(data.msg);
            }
        });
    }
</script>
</body>
</html>